@import './mixin/base.scss';
@import './font.scss';

$baseRem : 0.05rem;
$baseUrl : '../images/';


* {
    box-sizing: border-box;
}

body, html {
    height: 100%;
    width: 100%;
}

p {
    margin: 0;
}

.no-mrg {
    margin: 0 !important;
}

.base_text {
    color: #8b8b8b;
    font-size: $baseRem * 12;
}

.base_title {
    color: #0e0e0e;
    font-size: $baseRem * 16;
}

.base_arrow_r {
    width: $baseRem * 5;
    margin-left: $baseRem * 5;
}
.img_cycle_dir {
    background-color: white;
    img {
        display: block;
        width: 100%;
    }
}


// list with item
.p-media {
    color: #d1d1d1;
    @include flex_box(row, flex-start);
    padding: 0 $baseRem * 15;
    background: white;
    border:  {
        bottom: 1px solid #e2e2e2
    }
    .p-media-left {
        @include flex_box(row);
        .p-media-box {
            &.with-label {
                position: relative;
                .label {
                    position: absolute;
                    right: -1px;
                    top: -1px;
                    display: block;
                    height: $baseRem * 17;
                    width:  $baseRem * 17;
                    border-radius: 50%;
                    color: white;
                    background: #ff0000;
                    font-size: $baseRem * 12;
                    text-align: center;
                    line-height: $baseRem * 17;
                    box-shadow: -1px 1px 1px #be6823
                }
            }
            background: #fe8b2f;
            width: $baseRem * 50;
            height: $baseRem * 50;
            border-radius: 50%;
            @include flex_box(row);
            justify-content: center;
            align-items: center;
            img {
                display: block;
                width: $baseRem * 25
            }
        }
    }
    .p-media-body {
        flex-grow: 1;
        padding: $baseRem * 10 0;
        height: $baseRem * 70;
        line-height: $baseRem * 50;
        margin: {
            left: $baseRem * 10
        }
        .p-media-body-t {
            @include flex_box(row, space-between, baseline);
            p {
                margin: 0;
                @extend .base_title;
            }
            span {
                display: block;
                font-size: $baseRem * 12
            }
        }
        .p-media-body-b {
            @extend .base_text;
            height: $baseRem * 36;
            @include text_ellipsis(2);
        }
    }
}


//define list

.active-record {
    background-color: white;
    .act-item {
        padding: $baseRem * 6 0;
        @include flex_box(row, flex-start);
        border-bottom: 1px solid #e2e2e2;
        .item-left {
            position: relative;
            height: $baseRem * 44;
            &:after {
                content: '';
                position: absolute;
                height: $baseRem * 30;
                width: 1px;
                background: #e2e2e2;
                right: -$baseRem * 15;
                top: $baseRem * 7;
            };
            p {
                color: #898989;
                font-size: $baseRem * 14;
            };
            text-align: center;
            flex-basis: $baseRem * 40;
            margin: 0 $baseRem * 15;
        }
        .item-right {
            flex-grow: 1;
            @include flex_box(row, space-between);
            margin: 0 $baseRem * 15;
            .active_state {
                font-size: $baseRem * 13;
                color: #0089d3;
            }
        }
    }
}


.panel_title {
    position: relative;
    font-size: $baseRem * 14;
    color: #0e0e0e;
    margin: 0;
    height: $baseRem * 21;
    padding: {
        left: $baseRem * 15;
    };
    margin-bottom: $baseRem * 10;
    &:before {
        content: '';
        position: absolute;
        left: 0;
        top: $baseRem * 2;
        height: $baseRem * 17;
        width: 5px;
        background-color: #fd8c30;
    }
}
.panel_content {
    p {
        color: #0e0e0e;
        font-size: $baseRem * 14;
        margin: {
            bottom: $baseRem * 20;
        }
    }
}